<script setup lang="ts">
import { ref, onBeforeMount, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { $DoctorList, $DoctorListByDepartment } from '@/api/doctor'
const router = useRouter()
const route = useRoute()

// 分页
const page = ref(0) // 总页数
const changePage = (e: any) => {
    if (route.query.department === '3') {
        $DoctorList().then(res => {
            doctorList.value = res.data.slice(0 + 6 * (e - 1), 6 + 6 * (e - 1))
        })
    } else {
        $DoctorListByDepartment({ department: route.query.department }).then(res => {
            doctorList.value = res.data.slice(0 + 6 * (e - 1), 6 + 6 * (e - 1))
        })
    }
}

//跳转医生介绍页面
const goToDoctorIntroduce = (id: number) => {
    router.push('/doctorIntroduce?id=' + id)
}

//获取医生列表
const doctorList = ref([{
    id: 0,
    name: '',
    position: '',
    department: 1,
    good: '',
    url: ''
}])
const type = (["内科", "外科", "儿科"])
onBeforeMount(() => {
    $DoctorList().then(res => {
        doctorList.value = res.data.slice(0, 6)
        //计算总页数
        page.value = Math.ceil(res.data.length / 6)
    })
})

// 监听路由type变化
watch(() => route.query.department, () => {
    if (route.query.department === '3') {
        $DoctorList().then(res => {
            doctorList.value = res.data.slice(0, 6)
            //计算总页数
            page.value = Math.ceil(res.data.length / 6)
        })
    } else {
        $DoctorListByDepartment({ department: route.query.department }).then(res => {
            doctorList.value = res.data.slice(0, 6)
            //计算总页数
            page.value = Math.ceil(res.data.length / 6)
        })
    }
})

</script>

<template>
    <div class="doctor-list">
        <div class="doctor-item" v-for="item in doctorList" :key="item.id" @click="goToDoctorIntroduce(item.id)">
            <div class="doctor-information">
                <div class="doctor-name">{{ item.name }}</div>
                <div class="doctor-position">{{ item.position }}</div>
                <div class="doctor-department">{{ type[item.department] }}</div>
                <div class="doctor-good">{{ item.good }}</div>
            </div>
            <div class="doctor-img">
                <img :src="item.url" alt="">
            </div>
        </div>
        <el-pagination background layout="prev, pager, next" :page-count="page" @current-change="changePage" />
    </div>
</template>

<style scoped lang="scss">
.doctor-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 67vw;

    .doctor-item {
        display: flex;
        width: 32vw;
        height: 37vh;
        padding: 2.5vw;
        background: url('@/images/doctor/doctor-list-bg.png') no-repeat;
        background-size: 100% 100%;
        margin-bottom: 5vh;
        cursor: pointer;

        .doctor-information {
            flex: 5;
            margin-right: 1vw;
            color: #fff;

            .doctor-name {
                margin: 0.7vw 0;
                font-size: 1.5vw;
            }

            .doctor-position {
                font-size: 0.9vw;
            }

            .doctor-department {
                margin: 0.3vw 0 2.4vw;
                font-size: 0.9vw;
            }

            .doctor-good {
                font-size: 0.7vw;
                line-height: 1.2vw;
            }
        }

        .doctor-img {
            flex: 3;

            img {
                width: 9vw;
                height: 26vh;
            }
        }
    }

    :deep(.el-pagination) {
        margin-top: 1vh;

        .el-pager li {
            min-width: 2vw;
            height: 2vw;
            font-size: 1vw;
            padding: 0;
            margin: 0 0.5vw;
            border-radius: 0.2vw;
        }

        button {
            min-width: 2vw;
            height: 2vw;
            padding: 0;
            margin: 0 0.5vw;
        }

        .el-icon {
            display: flex;
            font-size: 1vw;

            svg {
                width: 1vw;
            }
        }

    }
}
</style>